<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单规则验证</title>
        <#include "/pubHeadStyle.html">
        <link rel="stylesheet" href="${ctx}/css/form.css">
    </head>
    <body>
        <form class="layui-form" style="background: #fff;height: 100%;">
            <div class="layui-fluid" style="height:380px;overflow: auto">
                <div class="layui-form-item">
                    <label class="layui-form-label">规则名<span style="color:red;">*</span></label>
                    <div class="layui-input-inline" style="width: 160px">
                        <input type="text" id="ruleName" name="ruleName" autocomplete="off" placeholder="请输入名称"
                               class="layui-input" lay-verify="required" maxlength="25">
                    </div>
                    <label class="layui-form-label">别名<span style="color:red;">*</span></label>
                    <div class="layui-input-inline" style="width: 160px">
                        <input type="text" id="alias" name="alias" placeholder="请输入别名" autocomplete="off"
                               class="layui-input" lay-verify="required" maxlength="50">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">规则<span style="color:red;">*</span></label>
                    <div class="layui-input-block" style="width: 440px;">
                        <input type="text" id="rule" name="rule" placeholder="请输入规则" autocomplete="off"
                               class="layui-input" lay-verify="required" maxlength="50">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 85px;margin-left: -5px;">请输入验证值</label>
                    <div class="layui-input-inline" style="width: 337px;">
                        <input type="text" id="ruleValue" placeholder="请输入验证值" autocomplete="off" class="layui-input" maxlength="50">
                    </div>
                    <div class="layui-input-inline" style="width:92px;">
                        <a class="layui-btn layui-btn-normal" id="validationRules">验证规则</a>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 85px;margin-left: -5px;position: relative;">错误提示信息<span style="position: absolute;color:red;">*</span></label>
                    <div class="layui-input-block" style="width: 440px;">
                        <input type="text" id="tipInfo" name="tipInfo" placeholder="请输入错误提示信息" autocomplete="off"
                               class="layui-input" lay-verify="required" maxlength="50">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述<span style="color:red;">*</span></label>
                    <div class="layui-input-block" style="width: 440px;">
                        <input type="text" id="memo" name="memo" placeholder="请输入描述" autocomplete="off"
                               class="layui-input" lay-verify="required" maxlength="50">
                    </div>
                </div>

                <div class="clear">
                </div>
            </div>
            <div class="layui-btn-container" style="position: absolute;left: 39%;bottom: 0;">
                <button class="layui-btn" lay-submit lay-filter="save">保存</button>
                <button class="layui-btn layui-btn-danger" id="return">取消</button>
            </div>
        </form>
        <script>
            layui.config({
                base: serverPath.formPath + staticPath.formPath //静态资源所在路径
            }).extend({
                index: 'index' //主入口模块
            }).use(['index', 'form', 'jquery', 'commons'], function () {
                var form = layui.form;
                var layer = layui.layer;
                var $ = layui.$, commons = layui.commons;
                var setter = layui.setter;

                var ruleId = '${ruleId}';
                if (ruleId !== '') {
                    //获取数据
                    $.ajax({
                        url: serverPath.formPath + setter.formLinkPath + "formRule/detail",
                        data: {"ruleId": ruleId},
                        dataType: 'json',
                        contextType: 'json',
                        success: function (data) {
                            var resultData = data.data;
                            $("#ruleName").val(resultData.name);
                            $("#alias").val(resultData.alias);
                            $("#rule").val(resultData.rule);
                            $("#tipInfo").val(resultData.tipInfo);
                            $("#memo").val(resultData.memo);
                            form.render();
                        },
                        error: function () {
                            layer.msg("cuole ");
                        }
                    });
                }

                //关闭弹窗
                var index = parent.layer.getFrameIndex(window.name);
                $('#return').click(function () {
                    parent.layer.close(index);
                });

                /**
                 * 点击校验规则，将校验值与规则进行匹配
                 */
                $("#validationRules").click(function () {
                    var ruleString = $("#rule").val();
                    var ruleValue = $("#ruleValue").val();
                    var result = (new RegExp(ruleString)).test(ruleValue);
                    if (result) {
                        layer.alert("校验通过", {icon: 1});
                    } else {
                        layer.alert("不符合规则", {icon: 2})
                    }
                });

                form.on('submit(save)', function (data) {
                    data.field["name"] = $("#ruleName").val();
                    data.field["id"] = ruleId;
                    $.ajax({
                        url: serverPath.formPath + setter.formLinkPath + "formRule/add",
                        type: "post",
                        contentType: 'application/json',
                        dataType: 'json',
                        data: JSON.stringify(data.field),
                        success: function (result) {
                            if (result.code === 0) {
                                layer.alert(result.msg, {skin: 'btn-class'}, function () {
                                    commons.bulletWindow(index);
                                    parent.layui.table.reload('formRule', {
                                        page: {
                                            curr: 1
                                        }
                                    });
                                    parent.layui.totalFilter.init('formRule');
                                });
                            } else {
                                layer.alert(result.msg);
                            }
                        }
                    });
                    return false;
                });

                /*鼠标失去焦点将内容自动填充到别名*/
                $("#ruleName").change(function () {
                    var str = $(this).val();
                    if (str == "") return;
                    var arrRslt = component.chineseToPinyinAlias(str);
                    $("#alias").val(arrRslt[0]);
                });
            });
        </script>
    </body>
</html>